<!--
 * @Author: your name
 * @Date: 2021-09-24 09:18:52
 * @LastEditTime: 2021-09-24 09:40:16
 * @LastEditors: Please set LastEditors
 * @Description: 上传组件
 * @FilePath: \uniapp-cil\src\components\x-upload\x-upload.vue
-->
<template>
  <view class="u-flex u-row-center">
    <view
      class="
        upload_box
        u-flex
        flex_col
        u-row-center u-m-r-20
        color_3
        u-font-28
        fw_5
      "
      v-for="(item, index) in list"
      :key="index"
    >
      <template>
        <view
          class="upload_img u-flex flex_col u-row-center m_b_15"
          v-if="!item.image"
          @click="uploadImg(index)"
        >
          <!-- <u-image width="50" :src="item.icon" mode="widthFix"></u-image> -->
          <u-icon :name="item.icon" size="50" color="#999"></u-icon>
          <text class="u-font-26 color_9 u-m-t-15">请选择图片</text>
        </view>
        <view class="img_box" v-else>
          <image
            :src="item.image"
            class="upload_img m_b_10"
            @click="previewImage(index)"
            mode="aspectFill"
          ></image>
          <view class="close_btn" @click.stop="delImg(index)">
            <u-icon
              name="close-circle"
              :color="$u.color.primary"
              size="40"
            ></u-icon>
          </view>
        </view>
        <text class="main_pink fs24 warning_color" v-if="item.tips"
          >({{ item.tips }})</text
        >
        <text v-if="item.title">{{ item.title }}</text>
      </template>
    </view>
  </view>
</template>

<script>
export default {
  name: "x-upload",
  props: {
    list: {
      type: Array,
      required: true,
    },
    // 上传地址
    action: {
      type: String,
      default: "",
    },
    // 是否自定义上传
    customUpload: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  methods: {
    // 删除图片
    delImg(index) {
      uni.showModal({
        title: "提示",
        content: "是否要删除这张图片?",
        success: (res) => {
          if (res.confirm) {
            this.$emit("delImg", index);
          }
        },
      });
    },
    // 预览图片
    previewImage(index) {
      uni.previewImage({
        current: index,
        urls: this.$x.pointsField(this.list, "image"),
      });
    },
    // 上传文件
    uploadFile(filePath, formData = {}) {
      return new Promise((resolve, reject) => {
        const uploadTask = uni.uploadFile({
          url: this.action,
          filePath,
          name: "file",
          formData,
          success: (res) => {
            resolve(res);
          },
          fail: (err) => {
            reject(err);
          },
        });

        uploadTask.onProgressUpdate((res) => {
          console.log(res, "监听上传信息");
          const SIZE = 20 * 1024 * 1024;
          if (res.totalBytesSent > SIZE) {
            uni.showToast({
              title: `请上传20M以内的多媒体资源!`,
              icon: "none",
              mask: true,
            });
            uploadTask.abort();
          }
        });
      });
    },
    // 上传图片
    uploadImg(index) {
      if (this.customUpload) {
        this.$emit("upload", index);
        return false;
      }

      if (!this.action) {
        uni.toast("请配置上传地址!");
      }

      uni.chooseImage({
        count: 1,
        success: (file) => {
          this.list[index].image = file.tempFiles[0].path;
          this.uploadFile(file.tempFiles[0].path)
            .then((res) => {
              this.$emit("on-success", res, index, this.list);
            })
            .catch((err) => {
              this.$emit("on-error", err, index, this.list);
            });
        },
        fail: (err) => {
          console.log(err, "选择图片失败");
        },
      });
    },
  },
};
</script>

<style lang="scss">
.upload_box {
  .img_box {
    position: relative;

    .close_btn {
      position: absolute;
      top: 10rpx;
      right: 10rpx;
    }
  }

  .upload_img {
    width: 200rpx;
    height: 200rpx;
    background-color: #f4f5f6;
    border: 1rpx solid #dedede;
  }
}
</style>
